<?php

use app\assets\BackendAsset as Asset;

/* @var $this yii\web\View */
?>
<el-container class="index-wrapper">
    <el-header class="top-wrapper bg-white" :class="getTopClass" height="auto" ref="mainScrollShadow">
        <el-row :inline="true" class="button-container">
            <el-col :xs="12" :sm="12" :md="12" :lg="5">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <a><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        工作台
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="19" class="text-right"></el-col>
        </el-row>
    </el-header>
    <el-main class="content-wrapper transits bg-white">
        <div class="pv-10 ph-15" style="display: none;">
            <!-- 提醒 START -->
            <div class="tip">
                <el-collapse v-model="setting.activeNotice" accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                温馨提示
                            </span>
                        </template>
                        <div class="content">
                            <p>
                                1、一些小提示: 我是提示；
                                一些小代码：<code>我是小代码</code>
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </div>
        <el-form :inline="true" @submit.native.prevent class="search-container">
            <div class="item display-inline item-group">
                <el-form-item class="no-pt search-time-wrapper el-form-item-200" label="">
                    <el-popover v-model="searchTime.show" width="340" trigger="click"
                                placement="bottom">
                        <template slot="reference">
                            <el-input v-model="searchTime.selectTxt" class="selected-text"
                                      :class="searchTime.show ? 'active' : ''" size="small"
                                      suffix-icon="el-icon-arrow-down" readonly>
                            </el-input>
                        </template>
                        <div class="search-time-pop">
                            <el-row type="flex" v-for="item in searchTime.option">
                                <el-col span="4" class="item text-center font-third">
                                    <span v-text="item.text"></span>
                                </el-col>
                                <el-col span="20" class="child-wrapper">
                                    <el-row type="flex" justify="space-between">
                                        <el-col v-for="child in item.data" span="7"
                                                class="item text-center font-second"
                                                :class="getSearchTimeClass(child)"
                                                @click.native="searchTimeClick(child, item.last)">
                                            <span v-text="child.text"></span>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <div class="border-1px-bottom pv-10"></div>
                            <div class="custom-time">
                                <div class="font-third pb-10">自定义时间</div>
                                <el-date-picker v-model="searchTime.time_range" type="daterange"
                                                size="small" @change="searchTimeChange"
                                                range-separator="至" start-placeholder="开始日期"
                                                :picker-options="searchTime.elementOpt"
                                                end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                            <div class="border-1px-bottom mt-20 mb-10"></div>
                            <el-row>
                                <el-col span="24" class="text-center mt-15">
                                    <el-button @click.native="submitSearchTime" type="primary"
                                               size="small">
                                        确定
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-popover>
                </el-form-item>
            </div>
        </el-form>
        <el-card class="card-wrapper simple-wrapper">
            <div slot="header">
                <span class="w-icon-data"></span>
                <span>数据简报</span>
            </div>
            <el-row gutter="20">
                <el-col class="mt-20" span="8" v-for="(item, key) in simpleStats">
                    <el-card element-loading-text="初始化中..." v-loading.lock="item.loading"
                             class="card-item" shadow="hover">
                        <el-row type="flex">
                            <el-col span="12">
                                <div v-if="searchForm.time_type=='custom'" class="clean-20px">

                                </div>
                                <div class="title">
                                    <span v-text="item.text"></span>
                                </div>
                                <div class="number">
                                    <el-link type="primary" class="pointer value" v-text="item.sum"
                                             @click="goToPage(item)"></el-link>
                                    <span class="unit" v-text="item.unit"></span>
                                </div>
                                <div class="des" v-if="searchForm.time_type!='custom'"
                                    :title="item.lastSum + item.unit">
                                    较<span v-text="searchTime.lastSelectTxt"></span>
                                    <span class="rate bottom">
                                        <span v-if="item.percent > 0" class="text-danger">
                                            <span v-text="item.percent + '%'"></span>
                                            <span class="el-icon-top"></span>
                                        </span>
                                        <span v-else-if="item.percent < 0" class="text-success">
                                            <span v-text="item.percent + '%'"></span>
                                            <span class="el-icon-bottom"></span>
                                        </span>
                                        <span v-else>
                                            <span>--</span>
                                            <span>--</span>
                                        </span>
                                        <span class="el-icon-bottom text-success" v-else></span>
                                    </span>
                                </div>
                            </el-col>
                            <el-col span="12">
                                <div :id="item.idName" class="item-chart"></div>
                            </el-col>
                            <el-col span="24" class="text-center load-error-wrapper"
                                    v-if="!item.status">
                                <div class="load-error">
                                    <span class="text-danger">初始化失败，请稍后</span>
                                    <el-button @click.native="initSimpleItem(key, item)" type="text"
                                               size="small">重试
                                    </el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="card-wrapper sum-wrapper mt-20">
            <div slot="header">
                <span class="w-icon-data"></span>
                <span>数据汇总</span>
            </div>
            <div class="card-item" v-for="item in sumStats">
                <el-divider content-position="left" class="mt-15 mb-10">
                    <span v-text="item.text + '汇总'"></span>
                </el-divider>
                <el-row gutter="20" element-loading-text="初始化中..." v-loading.lock="item.loading">
                    <el-col class="mt-10 card-item" :span="4" v-for="(sItem, sKey) in item.data">
                        <div class="data-item">
                            <div class="title" v-text="sItem.text + item.text"></div>
                            <div class="number">
                                <el-link class="pointer value" v-text="sItem.data" type="primary"
                                         @click="goToPage(item, {status: sItem.value})"></el-link>
                                <span class="unit" v-text="item.unit"></span>
                            </div>
                        </div>
                    </el-col>
                    <el-col span="24" v-if="!item.status" class="text-center load-error-wrapper">
                        <div class="load-error">
                            <span class="text-danger">初始化失败，请稍后</span>
                            <el-button @click.native="initSumItem(item)" type="text"
                                       size="small">重试
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-row gutter="20" class="">
            <el-col class="mt-20 card-item" :span="item.data && item.data.length > 10 ? 24 : 12"
                    v-for="(item, key) in chartStats">
                <el-card class="chart-wrapper card-wrapper">
                    <div slot="header">
                        <span class="w-icon-data"></span>
                        <span v-text="item.text"></span>
                    </div>
                    <div element-loading-text="初始化中..." v-loading.lock="item.loading"
                         class="chart-content">
                        <div :id="item.idName" style="height: 320px; width: 100%">

                        </div>
                        <div v-if="!item.status" class="text-center load-error-wrapper">
                            <div class="load-error">
                                <span class="text-danger">初始化失败，请稍后</span>
                                <el-button @click.native="initSumItem(item)" type="text"
                                           size="small">重试
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="clean-30px"></div>
    </el-main>
</el-container>

<?= Asset::addCss($this, '/css/backend/work-bench.css'); ?>

<?= Asset::addScript($this, '/plugin/e-charts/js/echarts.min.js'); ?>
<?= Asset::addScript($this, '/js/backend/work-bench.js'); ?>
<?= $this->registerJs('instance = new app();'); ?>
